<template>
	<view class="container">
		<view class="logo">
			<!-- <image src="/static/login/logo.png"></image> -->
			<text style="font-size: 64rpx;font-weight: bold;margin-left: 30rpx;">登录test</text>
		</view>
		<view class="form">
			<view class="inputBox">
				<view class="inner">
					<u-icon name="account" size="36" color="#333333"></u-icon>
					<u-input v-model="username" placeholder="请输入您的账号" :customStyle="customStyle" />
				</view>
			</view>
			<view class="inputBox">
				<view class="inner">
					<u-icon name="lock" size="36" color="#333333"></u-icon>
					<u-input v-model="password" placeholder="请输入您的密码" :customStyle="customStyle" />
				</view>
			</view>
			<view class="submit" @click="submit">
				<text>登录</text>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		storage
	} from '@/common/utils/storage.js'
	import {
		apis
	} from '@/api/api.js'
	export default {
		data() {
			return {
				username: 'xiaowenyaoshanghai', //账号
				password: 'W@rkshop2021', //密码
				customStyle: //自定义输入框样式
				{
					'width': '100%',
					'marginLeft': '10rpx'
				}
			};
		},
		methods: {
			submit() {
				storage.setStorageDataSync("token", "");
				var that = this

				if (this.username == '' || this.password == '') {
					this.$show.toastMessage('账号密码不能为空');
				} else {
					apis.smartLockLogin({
						username: that.username,
						password: that.password
					}).then(result => {
						if (result.res.data.code == '200') {
							storage.setStorageDataSync('token', result.res.data.token);
							that.getUserInfoData()
						} else {
							that.$show.toastMessage(result.res.data.msg);
						}
					})
				}
			},
			getUserInfoData() {
				var that = this
				apis.getUserInfo().then(result => {
					if (result.res.data.code == '200') {
						storage.setStorageDataSync("sUserInfo", result.res.data.data.user);
						storage.setStorageDataSync("sPermissions", result.res.data.data.permissions);
						uni.switchTab({
							url: '/pages/smartLock/views/index'
						})
					} else {
						that.$show.toastMessage(result.res.data.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {

		.logo {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 150rpx 0;
		}

		.form {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.inputBox {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 40rpx;

				.inner {
					width: 100%;
					display: flex;
					flex-direction: row;
				}
			}

			.submit {
				text-align: center;
				margin-top: 100rpx;

				text {
					padding: 24rpx 318rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					background-color: #3463f1;
				}

			}
		}
	}
</style>